iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
0
自我挑戰組

CSS、JS-30天研究筆記系列 第 2

【day2】關於CSS height高度屬性

  • 分享至 

  • xImage
  •  

今天分享一個height的特性與一個實用的文字編排設定!

一、關於height的百分比

  1. height:100%
    如果在一個div設置一張背景圖,並設置width:100% ;hight:100% ,
    會發現div的高度根本稱不開。這時需在html,body上設hight:100%,
    因為height的百分比值需要父級有一個可以生效的高度值才起作用。

  2. height:100vh
    vh(view height)指瀏覽器內部的可視區域高度的百分比,window.innerWidth/window.innerHeight
    上述例子問題也可以使用vh單位解決,不用在html,body上設hight:100%
    但是vh單位在IE8以下版本不支援。

二、視字數多寡自動居中/齊左對齊
需分二層架構,外層:text-align: center;內層:display: inline-block; text-align: left
當文字少於一行的时候居中顯示,文字超過一行居左顯示

三、 相關連結&參考內容:


上一篇
【day1】關於HTML塊級與行內元素以及CSSdisplay屬性
下一篇
【day3】關於CSS content屬性
系列文
CSS、JS-30天研究筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
eric19740521
iT邦新手 1 級 ‧ 2023-03-28 17:33:46

關於第一點.經過我的測試
height:100%無論在 html 或是body設置,對於div都沒效果

1.body height:100%無效,div height:100vh有效

<body class="m:0 h:100%" style="height:100%;margin:0px">
<div class="w:full h:100% bg:red" style="height:100vh;background-color:red"> 

	test
</div>


</body>

2.兩者有效

<body class="m:0 h:100%" style="height:100vh;margin:0px">
<div class="w:full h:100% bg:red" style="height:100%;background-color:red"> 

	test
</div>


</body>

結論 body設100vh

body設100vh 這樣方便子元素

我要留言

立即登入留言